<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80">
	
			<FormItem class="w-50" label="案例名称" slot="">
				<Input v-model="sample.title" placeholder="请输入名称"></Input>
			</FormItem>
			
			<!-- <FormItem class="" label="案例状态" slot="">
				<Select v-model="sample.statu" clearable>
					<Option v-if="sample.statu" value="1">可用</Option>
					<Option v-else value="0">禁用</Option>
				</Select>
			</FormItem> -->
			<FormItem class="" label="案例状态">
				<i-switch v-model="sample.statu"></i-switch>{{sample.statu == 1 ? " 已激活":" 已禁用"}}
			</FormItem>
			<FormItem class="" label="案例封面">
				<div class="d-flex flex-row">
					<label class="ivu-input">{{coverFile.name}}</label>
					<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">更改图片</label>
					<input @change="fileChange($event,coverFile)" id="cover" style="display: none;" type="file"></input>
				</div>
				<div class="d-flex flex-row mt-2" v-if="!coverFile.name">
					<img v-if="sample.url" class="w-25" :src="'https://'+sample.url" />
				</div>
				<div class="d-flex flex-row mt-2" v-if="coverFile.name">
					<img v-if="coverFile.url" class="w-25" :src="coverFile.url" />
				</div>
			</FormItem>
			<FormItem class="" label="施工案例详情:">
				<div style="display: block; position: relative; z-index: 0;" id="editor">
					
				</div>
			</FormItem>
			
			<FormItem class="text-right">
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>
<script>
	import E from "wangeditor";
	export default {
		data() {
			return {
				sample: {
					sampleId: "",
					title: "",
					coverImgId: "",
					contant: "",
					statu: "",
					url:"",
				},
				coverFile: {
					name: "",
					file: undefined,
					url:"",
				},
				editor: undefined,
				url:"",
			}
		},
		methods: {
			/* changeP: function(selectedPermissionId) {
				if (selectedPermissionId === 0) {
					this.sample.path = "";
				}
			}, */
			fileChange: function(e,imgItem) {
				// this.coverFile.file = e.target.files[0];
				// this.coverFile.name = this.coverFile.file.name;
				// this.coverFile.onProgress = this.onProgress;
				
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				imgItem.onProgress = this.onProgress;
			},
			onProgress: function(pData) {
				console.log(pData);
			},
			submit: function() {
				let self = this;
				
				if (this.sample.title.length === 0) {
					this.message.error("请输入案例名称");
					return;
				}
				
				if (this.sample.sampleId === 0) {
					this.message.error("ID丢失");
					return;
				}
				
				delete self.sample.cu;
				delete self.sample.ct;
				delete self.sample.uu;
				delete self.sample.ut;
				
				if (self.coverFile.name == ""){
					self.http.put({
						url: "/sample/sample/change",
						param: {
							sampleId:self.sample.sampleId,
							title:self.sample.title,
							contant:self.editor.txt.html(),
							statu:self.sample.statu,
							coverImgId:self.sample.coverImgId,
						}
					}).then(data => {
						self.message.info("更改成功");
						self.$tabs.close();
					});
				}else{
					this.common.submitFile(self.coverFile).then(function(res) {
						self.coverFile.url = res.Location;
						self.http.put({
							url: "/sample/sample/change",
							param: {
								sampleId:self.sample.sampleId,
								title:self.sample.title,
								contant:self.editor.txt.html(),
								statu:self.sample.statu,
								url:self.coverFile.url,
								coverImgId:self.sample.coverImgId,
							}
						}).then(data => {
							self.message.info("更改成功");
							self.$tabs.close();
						});
					}).catch(function(err) {
						console.log(err)
						self.message.error("封面文件上传失败，取消新增案例。");
					});
				}

			},
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				let self = this;
				self.http.get({
					url: "/sample/sample/info",
					param: {
						sampleId: self.sample.sampleId
					}
				}).then(data => {
					self.sample = data.sampleInfo;
					if (data.imageInfo){
						self.sample.url = data.imageInfo.url;
					};
					
					/* if (data.sampleInfo.statu){
						self.sample.statu=1;
					}else{
						self.sample.statu=0;
						
					}; */
					self.editor.txt.html(data.sampleInfo.contant);
				});
			}
		},
		created: function(){
			this.sample.sampleId = this.$route.query.sampleId;
			this.init();
		},
		mounted: function() {
			this.editor = new E("#editor");
			let self = this;
			this.editor.config.customUploadImg = this.common.editorUploadFile;
			/* this.editor.config.customUploadVideo = this.common.editorUploadVideo; */
			this.editor.create();
		},
	}
</script>